@use "sass:math";

.quick-add {
  width: auto;
  overflow-y: auto;
  height: 100%;
  @include themify() {
    border: 1px solid getThemifyVariable('modal-border-color');
  }
}

.quick-add__item {
  display: flex;
  align-items: center;
  height: #{math.div(64, $base-font-size)}rem;
  padding-right: #{math.div(24, $base-font-size)}rem;

  button, a {
    @include themify() {
      color: getThemifyVariable('primary-text-color');
    }
  }
}

.quick-add__item:nth-child(odd) {
  @include themify() {
    background: getThemifyVariable('table-row-stripe-color-alternate');
  }
}

.quick-add__item-toggle {
  display: flex;
  align-items: center;
}

.quick-add__item-name {
  flex: 1;
}

.quick-add__icon {
  display: inline-block;
  margin-right:#{math.div(15, $base-font-size)}rem;
  width:#{math.div(35, $base-font-size)}rem;
  height:#{math.div(35, $base-font-size)}rem;
  @include icon();
  @include themify() {
    // icon graphic
    path {
      fill: getThemifyVariable('table-button-color');
    }

    // icon background circle
    path:first-child {
      fill: getThemifyVariable('table-button-background-color');
    }

    & svg {
      width:#{math.div(35, $base-font-size)}rem;
      height:#{math.div(35, $base-font-size)}rem;
    }
  }
}

.quick-add__icon > * {
  display: none;
}

.quick-add__in-icon {
  display: inline-block;
}

.quick-add__icon--in-collection .quick-add__in-icon {
  @include themify() {
    // icon graphic
    & path {
      fill: getThemifyVariable('table-button-active-color');
    }

    // icon background circle
    & path:first-child {
      fill: getThemifyVariable('table-button-background-active-color');
    }
  }
}

.quick-add__item,
.quick-add__item-toggle,
.quick-add__item-toggle:focus {
  cursor: pointer;
  
  @include themify() {
    & .quick-add__icon path {
      fill: getThemifyVariable('table-button-hover-color');
    }

    & .quick-add__icon path:first-child {
      fill: getThemifyVariable('table-button-background-hover-color');
    }
  }
}

.quick-add__icon--in-collection {
  .quick-add__remove-icon {
    display: inline-block;
  }

  .quick-add__add-icon {
    display: none;
  }
}

.quick-add__icon--not-in-collection {
  .quick-add__add-icon {
    display: inline-block;
  }

  .quick-add__remove-icon {
    display: none;
  }
}

